<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的预约</title>
    <link rel="stylesheet" href="./css/mine.min.css">

</head>

<body>
    <div class="container">
        <a href="./index.html"><button id="btn1">返回主页</button></a>
        <div class="title">
            <p>我的预约</p>
        </div>
        <!-- 渲染区域 -->
        <div class="mainBox">
            <div class="name">
                <p>姓名：</p>
                <p class="plan"></p>
            </div>
            <div class="time">
                <p>场次:</p>
                <p class="num"></p>
                &nbsp;&nbsp;
                <p class="time1"></p>
            </div>
        </div>
        <div class="imgbox">
            <img src="" alt="" height="100%" width="100%" class="img">
            <button id="btn" style="outline: none;border: none;">保存图片</button>
        </div>
    </div>
</body>
<script>
    let plan = document.querySelector(".plan");
    let num = document.querySelector(".num");
    let time = document.querySelector(".time1");
    let Username = localStorage.getItem("userName");
    let _phone = localStorage.getItem("phone");
    // POST请求
    fetch("http://newshopapi.0melon0.cn/api/f_user/report", {
        method: "POST", // type请求类型
        body: JSON.stringify({
            "phone": _phone,
            "name": Username
        }),
        // body: "type=冷笑话", //参数放置请求体
        headers: { //设置请求头，表单编码格式传输数据(参数)
            // "Content-Type": "application/x-www-form-urlencoded" //表单验证
            "Content-Type": "application/json"
        },
    }).then(function(response) {
        return response.json(); //转j son格式返回值，解析为可读数据
    }).then(function(data) {
        console.log(data.result); //获取请求成功的结果
        let _Data = data.result;
        let arr = [];
        let newarr = [];
        _Data.forEach((item) => {
            // console.log(item.day_time);
            // console.log(item.name);
            newarr.push(item.name)
            arr.push(item.day_time)
        });
        console.log(newarr[newarr.length - 1]);
        let one = newarr[newarr.length - 1];
        plan.innerHTML = one;
        console.log(arr[arr.length - 1]);
        let two = arr[arr.length - 1];
        let times = localStorage.getItem("times");
        num.innerHTML = two + "日";
        time.innerHTML = times;
    }).catch(function(error) {
        console.log(error); //获取请求失败的结果
    });

    //图片请求
    let ImgBox = document.querySelector("img");
    let _id = localStorage.getItem("_id");
    let token = localStorage.getItem('token');
    let btn = document.querySelector("#btn");

    let url = `http://newshopapi.0melon0.cn/api/f_user/Qrcode?token=${token}&id=${_id}`;
    //GET请求
    fetch(url, {
        method: "GET", //type请求类型；
        headers: { //设置请求头，表单编码格式传输数据(参数)
            "Content-Type": "application/x-www-form-urlencoded"
        }
    }).then(function(response) {
        return response.json(); //转json格式返回值
    }).then(function(data) {
        console.log(data.data.data);
        ImgBox.src = data.data.data;
        btn.addEventListener("click", () => {
            downloadIamge('.img')

        })
    }).catch(function(error) {
        console.log(error); //获取请求失败的结果
    })

    function downloadIamge(selector, name) {
        var img = document.querySelector(selector);
        var url = img.src;
        var a = document.createElement("a");
        var event = new MouseEvent("click");
        a.download = name || "下载图片名称";
        a.href = url;
        a.dispatchEvent(event)
    };
</script>

</html>